<template>
  <div>
    <slot-a>
      <div class="A">这是私人定制</div>
    </slot-a>
  </div>

  <div class="B">
    动态css
  </div>

  <div :class="[$style.div, $style.border]">
    module样式表
  </div>

  <div :class="[lp.div, lp.border]">
    module样式表
  </div>
</template>

<script lang="ts" setup>
import { ref, useCssModule } from 'vue'
import slotA from "@/components/slotA.vue"

const style = ref({
  color: 'green'
})

const backgroundColor = ref('pink')

setTimeout(() => {
  style.value.color = "#fff"
  backgroundColor.value = 'blue'
}, 1000);

const lp = useCssModule("lp")
console.log(lp)
// 一般应用场景在tsx时候
// return (<div class=[$style.div]></div>)

</script>


<style scoped lang="less">
// 全局样式
:global(div) {
  background-color: burlywood;
}
.A {
  color: #fff;
  background-color: red;
}

.B {
  // 变量是对象 v-bind('变量名')  需要引号
  color: v-bind('style?.color');
  // 变量是字符串 v-bind(变量名)  直接变量名
  background-color: v-bind(backgroundColor);
}
</style>

<style module>
.div {
  padding: 20px 40px;
  color: #fff;
}

.border {
  border: 1px solid #ccc;
}
</style>

<style module="lp">
.div {
  padding: 20px 40px;
  color: #fff;
  background-color: cadetblue;
}

.border {
  border: 1px solid #ccc;
}
</style>
